<template>
  <div class="home">
    <h1>{{num}}</h1>
    <button @click="add">num++</button>
    <p v-if="flag">显示</p>
    <p v-else>隐藏</p>
    <h1>{{obj.name}}</h1>
    <ul>
        <li v-for="item,index in arr" :key="item">{{item}}</li>
    </ul>
    <div ref="box">我是div的内容</div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import {ref,nextTick,onMounted} from 'vue'
import {useRoute} from 'vue-router'
export default {
  name: 'HomeView',
//   data() {
//     return {
//         num:10
//     }
//   },
//   methods: {
//     add(){
//         this.num++
//     }
//   },
    setup(props) {
        const num = ref(10)
        const flag = ref(true)
        const obj = ref({
            name:'张三',
            age:18
        })
        const arr = ref(['1','2','3','4'])
        console.log(obj.value.name);
        const add = ()=>{
            console.log(num);
            num.value++
        }
        const box = ref(null)
        setTimeout(()=>{
            console.log(box.value.innerHTML);
        },0)
        nextTick(()=>{
            console.log(box.value.innerHTML);
        })
         onMounted(()=>{
             console.log('我是挂载之后');
             console.log(box.value.innerHTML);
         })
         const route = useRoute()
         console.log(route.query.num);


        return {num,add,flag,obj,arr,box}
    },


  components: {
    // HelloWorld
  }
}
</script>
